<template>
    <div class="get-money-temp">
        <slide-bottom ref="appraiseBox">
            <div class="get-money positionR">
                <img class="get-money-close" @click="clickSlide" :src="staticImageUrl('images/close_white_bord.png')" alt="">
                <!--<img class="width-full" :src="staticImageUrl('images/circle/get_money_poster.png')" alt="">-->
                <!--<div class="get-poster-media">-->
                    <!--<img class="width-full" v-if="fission && fission.posterMedia && fission.posterMedia.mediaContents && fission.posterMedia.mediaContents[0] && fission.posterMedia.mediaContents[0].url" :src="fission.posterMedia.mediaContents[0].url" alt="">-->
                <!--</div>-->
                <div class="positionR get-money-wrap">
                    <img class="width-full position_absolute bg-img" v-if="fission && fission.posterMedia && fission.posterMedia.mediaContents && fission.posterMedia.mediaContents[0] && fission.posterMedia.mediaContents[0].url" :src="fission.posterMedia.mediaContents[0].url"alt="">
                    <img class="width-full bg-red-img" :src="staticImageUrl('images/circle/circle_get_money_redPakege.png')" alt="">
                    <div class="get-money-top">
                        <div>
                            <span class="get-money-sbtn" @click="$emit('confirmCash')">提现</span>
                            <p class="total-get-text">我当前共赚得</p>
                            <div class="money-content">
                                <span class="money-cout">￥</span>
                                <span>{{getMoney.selfMoney && getMoney.selfMoney.canCashAmount ? getMoney.selfMoney.canCashAmount : 0}}</span>
                            </div>
                            <div class="lose-time" v-if="getMoney.selfMoney && fission && fission.fissionCycle && getMoney.selfMoney.expireTime && getMoney.selfMoney.currentSysTime && (getMoney.selfMoney.expireTime - getMoney.selfMoney.currentSysTime) > 0 && getMoney.selfMoney.totalAmount < fission.cashMinAmount">
                                <day-hmsm @getPageFrame=finishTime :timerProp="{ timeSymbol:':',needMs: false,expStartTime: getMoney.selfMoney.expireTime - getMoney.selfMoney.currentSysTime}"></day-hmsm>
                                后现金将失效
                            </div>
                            <div class="lose-time" v-else-if="getMoney.selfMoney && fission && fission.fissionCycle && getMoney.selfMoney.canCashAmount >= fission.cashMinAmount">已达可提现额度</div>
                            <div class="lose-time" v-else-if="getMoney.selfMoney && getMoney.selfMoney.expireTime && getMoney.selfMoney.currentSysTime && getMoney.selfMoney.expireTime > 0 &&(getMoney.selfMoney.expireTime - getMoney.selfMoney.currentSysTime) <= 0">本轮现金已失效</div>
                            <div class="lose-time" v-else></div>
                            <!--<div class="lose-time"><day-hmsm @getPageFrame=finishTime :timerProp="{ timeSymbol:':',needMs: false,expStartTime: 6000}"></day-hmsm>后现金将失效</div>-->
                            <div class="text-center already-get-wmoney">
                                <span class="already-get-money" v-if="getMoney.selfMoney && fission && getMoney.selfMoney.canCashAmount >= fission.cashMinAmount && getMoney.selfMoney.hadCashAmount > 0">已提现{{getMoney.selfMoney && getMoney.selfMoney.hadCashAmount ? getMoney.selfMoney.hadCashAmount : 0}}元</span>
                                <span class="already-get-money" v-else-if="getMoney.selfMoney && fission && getMoney.selfMoney.canCashAmount >= fission.cashMinAmount">提现秒到微信钱包</span>
                            </div>
                            <div class="text-center btn-wcontent">
                                <span class="btn-wrap">
                                    <span class="content-btn-wrap" @click="$emit('toShare')">
                                         <span v-if="getMoney.selfMoney && fission && getMoney.selfMoney.expireTime && getMoney.selfMoney.currentSysTime && getMoney.selfMoney.expireTime > 0 &&(getMoney.selfMoney.expireTime - getMoney.selfMoney.currentSysTime) <= 0 && getMoney.selfMoney.totalAmount < fission.cashMinAmount">
                                            再来一次
                                        </span>
                                        <span v-else-if="getMoney.selfMoney && fission && ((getMoney.selfMoney.expireTime && getMoney.selfMoney.currentSysTime && getMoney.selfMoney.expireTime > 0 &&(getMoney.selfMoney.expireTime - getMoney.selfMoney.currentSysTime) > 0) || getMoney.selfMoney.hadCashAmount > 0 ) && getMoney.selfMoney.needHelpNum4Cash <= 20 && getMoney.selfMoney.canCashAmount < fission.cashMinAmount">
                                            <span>分享{{getMoney.selfMoney.needHelpNum4Cash}}次,即可提现</span>
                                        </span>
                                         <span v-else-if="getMoney.selfMoney && fission && getMoney.selfMoney.canCashAmount >= fission.cashMinAmount">
                                            <span>分享越多 提现越多</span>
                                        </span>
                                         <span v-else>
                                            <span>分享给好友</span>
                                            <span>再提现一次</span>
                                        </span>
                                    </span>
                                </span>
                            </div>
                            <div class="warn-text">
                                <img class="wechat-icon" :src="staticImageUrl('/images/circle/wechat_icon.png')" alt="">
                                <span>累计到{{fission.cashMinAmount}}元即可提现到微信钱包</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="get-money-content">
                    <div class="step-content-top">
                        <img class="width-full" :src="staticImageUrl('images/circle/step_content_top.jpg')" alt="">
                    </div>
                    <!--<div class="fontSize12 padding12px">-->
                        <!--<span class="width-box">友情提示：</span>1、分享给新人，奖励更多<br />-->
                        <!--<span class="width-box"></span>2、分享到市中心，更多奖励-->
                        <!--<p><span class="width-box"></span>（限阳江市区及周边）</p>-->
                    <!--</div>-->
                    <!--之前的版面样式-->
                    <div v-if="false">
                        <div class="title-wrap">
                            <img class="title-img" :src="staticImageUrl('images/circle/get_title_left.png')" alt="">
                            <span class="get-money-title">我的奖励战绩</span>
                            <img class="title-img" :src="staticImageUrl('images/circle/get_title_right.png')" alt="">
                        </div>
                        <div class="displayFlex get-money-wbox">
                            <div class="flex1 text-center" >
                                <span class="money get-money-num">{{getMoney.selfMoney && getMoney.selfMoney.totalAmount ? getMoney.selfMoney.totalAmount : 0}}</span>
                                <p class="get-money-text font-size10">获得奖励（元）</p>
                            </div>
                            <div class="flex1 text-center">
                                <span class="money">{{getMoney.selfMoney && getMoney.selfMoney.hadCashAmount ? getMoney.selfMoney.hadCashAmount : 0}}</span>
                                <p class="get-money-text font-size10">已提现（元）</p>
                            </div>
                            <div class="flex1 text-center">
                                <span class="money">{{getMoney.selfMoney && getMoney.selfMoney.canCashAmount ? getMoney.selfMoney.canCashAmount : 0}}</span>
                                <p class="get-money-text font-size10">还可提现（元）</p>
                            </div>
                        </div>
                        <div class="text-center get-money-wbtn">
                            <span class="get-money-btn" @click="$emit('confirmCash')">一键提现 <span class="font-size10">（{{fission.cashMinAmount}}元起）</span></span>
                        </div>
                        <p class="font-size10 descpriotn text-center">现金将直接转入您的微信钱包中，请注意查收</p>
                        <div class="botton-line"></div>
                    </div>
                    <div class="prize-list-box">
                        <!--<div class="title-wrap" v-if="false">-->
                            <!--<img class="title-img" :src="staticImageUrl('images/circle/get_title_left.png')" alt="">-->
                            <!--<span class="get-money-title">我的奖励</span>-->
                            <!--<img class="title-img" :src="staticImageUrl('images/circle/get_title_right.png')" alt="">-->
                        <!--</div>-->
                        <!--<div class="rank-title">排行榜</div>-->
                        <div class="tap-header width-full displayFlex flex-algin-center">
                            <span class="header-item flex1 active" @click="activeItem = 0">我的邀请</span>
                        </div>
                        <!-- v-show="activeItem == 1"-->
                        <div class="padding20px">
                            <no-data v-if="!selfHelp || !selfHelp.list || selfHelp.list.length == 0 "></no-data>
                            <user-list v-else-if="selfHelp && Object.keys(selfHelp).length > 0 && selfHelp.list.length > 0" :userProp="selfHelp"></user-list>
                        </div>
                        <div class="tab">
                            <!--<div class="tap-header width-full displayFlex flex-algin-center">-->
                                <!--<span class="header-item flex1" :class="{'active':activeItem == 0}" @click="localPlayShow">本地赚钱榜</span>-->
                                <!--<span class="right-line"></span>-->
                                <!--<span class="header-item flex1 text-right" :class="{'active':activeItem == 1}"  @click="myInvite">我的邀请</span>-->
                            <!--</div>-->
                            <div class="tap-header width-full displayFlex flex-algin-center">
                                <span class="header-item flex1 active" @click="activeItem = 0">本地赚钱榜</span>
                            </div>
                        </div>
                        <!-- v-show="activeItem == 0"-->
                        <div class="padding20px"  :class="{'change-list':localHelp.swiper && !localHelp.swiper.open}">
                            <no-data v-if="!localHelp || !localHelp.list || localHelp.list.length == 0 "></no-data>
                            <user-list ref="localList" v-else-if="localHelp && Object.keys(localHelp).length > 0 && localHelp.list.length > 0" :userProp="localHelp"></user-list>
                            <div class="text-center">
                                <span v-if="localHelp.swiper && localHelp.swiper.open" @click="changeList" class="iconfont icon-shuangjiantouxia"></span>
                                <span v-else-if="localHelp.swiper && !localHelp.swiper.open" @click="changeList" class="iconfont icon-shuangjiantoushang"></span>
                            </div>
                        </div>

                    </div>
                    <div v-if="getMoney.joinList">
                        <div class="tap-header width-full displayFlex flex-algin-center">
                            <span class="header-item flex1 active" @click="activeItem = 0">最近加入</span>
                        </div>
                        <div class="now-join-wteam">
                            <span class="now-join-team displayFlex justifyCtBwt">
                                <span class="now-join-wicon flex1" v-for="(value,key) in getMoney.joinList.list" v-if="key < 6">
                                    <img class="now-join-icon" :src="value.photo" alt="">
                                    <br />
                                    <span class="join-user-name one-line-ellepsis">{{nameEncryption(value.name)}}</span>
                                </span>
                            </span>
                            <span class="now-join-team displayFlex justifyCtBwt">
                                 <span class="now-join-wicon flex1" v-for="(value,key) in getMoney.joinList.list" v-if="key >= 6 && key < 12">
                                    <img class="now-join-icon" :src="value.photo" alt="">
                                    <br />
                                    <span class="join-user-name one-line-ellepsis">{{nameEncryption(value.name)}}</span>
                                </span>
                            </span>
                        </div>
                    </div>
                    <p class="os-warn text-center">平台保有对活动最终解释权，如遇恶意邀请，平台将收回活动奖金</p>
                    <div class="share-btn" v-if="false">
                        <img class="share-btn-img" @click="$emit('toShare')" :src="staticImageUrl('images/circle/share_btn.gif')" alt="">
                    </div>
                </div>
            </div>
        </slide-bottom>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        name: "GetMoney",
        props:{
            getMoneyProp:Object,
            fissionProp:Object,
        },
        data(){
            return{
                fission:{
                    // "floatIco": "https://xx/guafen100.gif",         //----浮窗图标
                    // "posterMedia": {                                //----海报媒体
                    //     "mediaType": 1,
                    //         "mediaContents": [
                    //         {
                    //             "url": "https://xx/guafen111.jpg"
                    //         }
                    //     ]
                    // },
                    // "needGps": true,                                //----是否需要地理定位
                    // "state": 1                                      //----@活动状态
                },
                getMoney:{
                    show:false,
                    selfMoney:{
                        // "helpNum": 20,                              //----助力数量
                        // "totalAmount": 10.5,                        //----总金额
                        // "hadCashAmount": 5.6,                       //----已提现金额
                        // "canCashAmount": 4.9,                       //----还可提现金额
                        // "rankingNO": 20
                    },
                    localMoneylist:{list:[]},
                    joinList:{list:[]},
                },
                localHelp:{
                    // needKey:false,
                    // swiper:{
                    //     open:true,
                    // },
                    //  list:[{
                    //     userId: 0,
                    //     name: '少年的你',
                    //     image: 'https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png',
                    //     description: '刚刚',
                    //     rightText: '234.56',
                    //     centerText: '234.56',
                    // }]
                },
                selfHelp:{
                    // needKey:false,
                    // swiper:{
                    //     open:true,
                    // },
                    //  list:[{
                    //     userId: 0,
                    //     name: '少年的你',
                    //     image: 'https://oss.pg.yibaotong.top/images/activity/circle/1023gift/bbd.png',
                    //     description: '刚刚',
                    //     rightText: '234.56',
                    //     centerText: '234.56',
                    // }]
                },
                activeItem:0,
            }
        },
        computed:{
            ...mapState({
                getMoneyProp: state => state.api.getMoney,
                fissionProp: state => state.api.fission,
            })
        },
        mounted(){
            this.getMoney = Object.assign({},this.getMoney,this.getMoneyProp);
            this.fission = Object.assign({},this.fission,this.fissionProp);
            if(this.getMoney.localMoneylist){
                this.localUserList( this.getMoney.localMoneylist );
            }
            if(this.getMoney.selfMoneylist){
                this.selfUserList( this.getMoney.selfMoneylist);
            }
            if(this.getMoney.selfMoney && this.getMoney.selfMoney.helpNum){
                this.activeItem = 1;
            }
        },
        methods:{
            selfUserList(val,listType){
                let that = this;
                if(val&& Array.isArray(val.list) && val.list.length > 0 ){
                    let tempObj = {};
                    let tempList = [];
                    val.list.forEach((value,index)=>{
                        tempObj = {};
                        tempObj = {
                            name: value.name,
                            image: value.photo,
                            rightText: (!value.amount ||value.amount == 0) ? '祝你新的一年福气满满' : '已助你获得'+value.amount+'元现金',
                        };
                        tempList.push(tempObj)
                    });
                    // let tempRecordObj = {
                    //     list:[],
                    //     swiper:{
                    //         open:false,
                    //     },
                    //     needKey:true,
                    // };
                    let tempRecordObj = {
                        list:tempList,
                        needKey:false,
                        showLength : 40,
                    }
                    that.selfHelp = Object.assign({},this.selfHelp,tempRecordObj);
                    // that.selfHelp.list = [];
                    // that.selfHelp.list.push(...tempList);
                }
            },
            myInvite(){
                this.isFirst = false;
                this.activeItem = 1;
            },
            localPlayShow(){
                this.activeItem = 0;
                setTimeout(()=>{
                    if(this.$refs.localList && this.$refs.localList.swiperAutoplay){
                            this.$refs.localList.swiperAutoplay()
                    }
                },300)

            },
            changeList(){
                let that = this;
                let tempRecordObj = {};
                if( this.localHelp.swiper.open ){
                    tempRecordObj = {
                        swiper:{
                            open:false,
                        },
                        showLength : 30,
                    }
                }else{
                    tempRecordObj = {
                        swiper:{
                            open:true,
                        },
                        showLength : 10,
                    }
                }
                that.localHelp = Object.assign({},this.localHelp,tempRecordObj);
            },
            finishTime(){
                this.$emit('timeOver');
            },
            localUserList(val){
                let that = this;
                if(val&& Array.isArray(val.list) && val.list.length > 0 ){
                    let tempObj = {};
                    let tempList = [];
                    val.list.forEach((value,index)=>{
                        tempObj = {};
                        tempObj = {
                            userId: value.userId,
                            name: value.name,
                            image: value.photo,
                            // description: value.createTime,
                            rightText: '已赚'+value.totalAmount+'元',
                            centerText: '邀请'+value.helpNum+'人',
                        };
                        tempList.push(tempObj)
                    });
                    let tempRecordObj = {
                        list:tempList,
                        swiper:{
                            open:true,
                        },
                        needKey:true,
                        showLength : 10,
                    }
                    that.localHelp = Object.assign({},this.localHelp,tempRecordObj);
                    // that.localHelp.list.push(...tempList);
                }
            },
            showData(){
                if (this.$refs.appraiseBox) {
                    this.$refs.appraiseBox.showSlideBottom();
                }
            },
            clickSlide(){
                this.$refs.appraiseBox.clickBord();
            }
        },
        watch:{
            'getMoney.localMoneylist'(val) {
                if(val){
                    this.localUserList(val);
                }
            },
            'getMoney.selfMoneylist'(val) {
                if(val){
                    this.selfUserList(val);
                }
            },
            getMoneyProp(val){
                this.getMoney = Object.assign({},this.getMoney,val);
            },
            fissionProp(val){
                this.fission = Object.assign({},this.fission,val);
            }
        },
        components:{
            'slide-bottom': () => import('../../../../components/commonComponents/slideBottom/SlideBottom'),
            'user-list': () => import('../../../../components/commonComponents/usersList/UserList'),
            "no-data": () => import("../../../../components/commonActModel/noData/NoData"),
            'day-hmsm':()=>import('../../../../components/commonComponents/timer/DayHMSM'),
        }
    }
</script>

<style scoped lang="scss">
    .get-money-temp /deep/{
        .com_black{
            z-index: 1050;
        }
        .no-wcomment{
            background-color: #fff;
        }
        .slide-bottom-transition{
            max-height: 90vh;
            height: auto;
            -webkit-touch-callout: inherit;
            -webkit-user-select: auto;
            -webkit-overflow-scrolling : touch;
        }
        .user-cname{
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            max-width: .69rem;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .key-color{
            font-size: .15rem;
            font-weight: bold;
            color: #a7a7a7;
        }
        .key0{
            color: #f89c03;
        }
        .key1{
            color: #f60d23;
        }
        .key2{
            color: #a4bfea;
        }
        .user-list-wrap{
            max-height: 1.08rem;
        }

    }
    .change-list /deep/{
        .user-list-wrap{
            max-height: none;
        }
    }
    .get-money /deep/{
        .user-list{
            padding: .06rem 0;
        }
        .user-item-right-center{
            min-width: 1rem;
            text-align: center;
            display: inline-block;
        }
        .user-item-right-text{
            min-width: 1rem;
        }
    }
    .get-money-btn{
        display: inline-block;
        border: 1px solid #ff5b31;
        color: #ff5b31;
        font-size: .2rem;
        text-align: center;
        border-radius: .25rem;
        width: 2rem;
        height: .4rem;
        line-height: .4rem;
    }
    .get-money-wrap{
        min-height: 4.7rem;
    }
    .botton-line{
        width: 100%;
        border-bottom: 1px dotted #fcedc9;
    }
    .right-line{
        height: .13rem;
        position: relative;
        width: .01rem;
        background-color: #a7a7a7;
        display: inline-block;
    }
    .header-item{
        margin-top: .12rem;
        display: inline-block;
        width: 48.5%;
        height: .4rem;
        line-height: .4rem;
        color: #a7a7a7;
        border-bottom: 1px solid #a7a7a7;
    }
    .header-item.active{
        color: #fe9203;
        border-bottom: 1px solid #fe9203;
    }
    .tap-header{
        /*border-bottom: 1px solid #a7a7a7;*/
    }
    .rank-title{
        padding: .2rem 0;
        text-align: center;
        font-size: .2rem;
        color: #333333;
        font-weight: bold;
    }
    .title-img{
        width: .25rem;
        vertical-align: text-top;
    }
    .get-money-title{
        font-size: .2rem;
        color: #333;
        padding: 0 .2rem;
        display: inline-block;
    }
    .money{
        color: #333;
        font-size: .27rem;
        font-weight: bold;
    }
    .get-money-num{
        color: #fe9203;
    }
    .get-money-text{
        color: #989898;
        padding-top: .05rem;
    }
    .get-money-content{
        padding: .25rem .2rem .3rem;
        position: relative;
        -webkit-border-radius: .1rem;
        -moz-border-radius: .1rem;
        border-radius: .1rem;
        /*border-top-left-radius: .1rem;*/
        /*border-top-right-radius: .1rem;*/
        margin: 0 .13rem;
        background-color: #fff;
    }
    .get-money{
        padding-bottom: .4rem;
        background-image: linear-gradient(to bottom,#fc4734,#fd7a34);
    }
    .title-wrap{
        text-align: center;
        padding: .3rem .16rem 0;
    }
    .get-money-wbox{
        display: flex!important;
        flex-wrap: wrap;
        padding-top: .3rem;
    }
    .get-money-wbtn{
        padding: .22rem;
    }
    .descpriotn{
        color: #a7a7a7;
        padding-bottom: .35rem;
    }
    .share-btn{
        text-align: center;
        width: 100%;
        height: .86rem;
    }
    .share-btn-img{
        width: 2.5rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        margin: auto;
    }
    .get-poster-media{
        height: 2.9rem;
    }
    .os-warn{
        padding-top: .1rem;
        font-size: .1rem;
        color: #a7a7a7;
    }
    .now-join-wicon{
        display: inline-block;
        padding-bottom: .1rem;
        text-align: center;
    }
    .now-join-team .now-join-wicon:last-child{
        padding-right: 0;
    }
    .now-join-icon{
        width: .37rem;
        height: .37rem;
        border-radius: 50%;
    }
    .join-user-name{
        display: inline-block;
        padding-top: .05rem;
        max-width: .5rem;
    }
    .now-join-wteam{
        padding-top: .23rem;
    }
    .get-money-close{
        position: absolute;
        right: .03rem;
        top: .05rem;
        width: .3rem;
        z-index: 2;
    }
    .total-get-text{
        font-size: .16rem;
        color: #f13019;
        text-align: center;
    }
    .get-money-sbtn{
        position: absolute;
        background-image: linear-gradient(to right,#f1331a,#f8a429);
        display: inline-block;
        border-top-left-radius: .25rem;
        border-bottom-left-radius: .25rem;
        padding: .02rem .1rem;
        text-align: center;
        font-size: .12rem;
        color: #ffe6ab;
        right: .43rem;
        top: -.1rem;
    }
    .money-content{
        position: relative;
        left: -.3rem;
        color: #f13019;
        font-size: .7rem;
        padding-top: .05rem;
        line-height: .65rem;
    }
    .money-cout{
        position: relative;
        left: .25rem;
        font-size: .35rem;
    }
    .get-money-top{
        position: absolute;
        left: 0;
        top: 1.6rem;
        width: 100%;
        text-align: center;
        z-index: 2;
    }
    .lose-time{
        color: #5c0f01;
        font-size: .11rem;
        height: .25rem;
    }
    .already-get-money{
        padding: .04rem .25rem;
        background-color: #fff0cf;
        border-radius: .25rem;
        text-align: center;
        color: #86392f;
        font-size: .12rem;
    }
    .already-get-wmoney{
        padding-top: .05rem;
        min-height: .2rem;
    }
    .btn-wrap{
        display: inline-block;
        height: .38rem;
        width: 2.5rem;
        background-color: #f47802;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        padding-bottom: .05rem;
        box-shadow: 0 0.01rem 0.05rem rgba(0,0,0,.5);
    }
    .content-btn-wrap{
        display: inline-block;
        color: #7f1003;
        width: 2.5rem;
        height: .33rem;
        line-height: .35rem;
        font-size: .18rem;
        background-image: linear-gradient(to bottom,#fcef2d,#ffbc10);
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }
    .btn-wcontent{
        margin-top: .55rem;
    }
    .warn-text{
        width: 100%;
        text-align: center;
        font-size: .12rem;
        color: #fff;
        padding-top: .19rem;
    }
    .wechat-icon{
        vertical-align: text-bottom;
        width: .19rem;
    }
    .bg-img{
        left: 0;
        top: 0;
        position: absolute;
    }
    .bg-red-img{
        position: relative;
        z-index: 1;
    }
    .get-money-temp{
        margin-bottom: .1rem;
    }
    .lose-time /deep/ {
        .timer-DayHMSM{
            display: inline-block;

        }
        .timer{
            display: inline-block;
            padding: 0;
        }
        .time-box{
            display: inline-block;
            background-color: #413D3C;
            font-size: .11rem;
            border-radius: 0;
            height: .25rem;
            text-align: center;
            line-height: .25rem;
            min-width: 0;
            color: #5c0f01;
            background: none;
            width: auto;
            padding: 0;
        }
        .time-boxs{
            padding: 0;
        }
        .time-second{
            .time-unit,.time-day{
                display: none;
            }
        }
    }
    .width-box{
        display: inline-block;
        width: .7rem;
    }
</style>